<template>
	<view class="container">
		<view class="" style="height: 20rpx"></view>
		<view class="search"  >
			<u-search shape="square" disabled bgColor="#ffffff" placeholder="搜一搜" :showAction="false"></u-search>
			<view class="asd" @click="goclass1(1)">
				
			</view>
		</view>
		<view class="" style="height: 20rpx"></view>
		<swiper class="swiper" circular autoplay :duration="500">
			<swiper-item v-for="(item, index) in info.banner" :key="index">
				<image :src="item.picture_image_text" mode="scaleToFill" @click="goclass1(0)"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<view class="items">
				<view class="">游戏</view>
				<view class="it_flex">
					<view class="it" v-for="(item, index) in info.shop_id1" @click="goclass(1, item, index)">
						<view class="it_left">
							<view class="name">{{ item.name }}</view>
							<view class="">
								点击查看
								<uni-icons color="#fff" type="right"></uni-icons>
							</view>
						</view>
						<image :src="http + item.image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="items">
				<view class="">主机</view>
				<view class="it_flex">
					<view class="it it1" v-for="(item, index) in info.shop_id2" @click="goclass(2, item, index)">
						<view class="it_left">
							<view class="name">{{ item.name }}</view>
							<view class="">
								点击查看
								<uni-icons color="#fff" type="right"></uni-icons>
							</view>
						</view>
						<image :src="http + item.image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			http: this.$imgUrl,
			info: {}
		};
	},
	onLoad(o) {
		uni.login({
			provider: 'alipay',
			success: (data) => {
				console.log(data);
				let authCode = data.authCode;
				console.log(authCode, 1212);
				this.$http
					.post('/api/user/getAliUserIdByCode', {
						code: authCode
					})
					.then((res2) => {
						if (res2.code == 1) {
							uni.setStorageSync('token', res2.data.userinfo.token);
							uni.setStorageSync('userId', res2.data.userinfo.user_id);
							let loginTime = new Date().getTime();
							uni.setStorageSync('loginTime', loginTime);
							this.$http
								.post('/api/index/index', {})
								.then((res) => {
									this.info = res.data;
								})
								.catch((err) => {
									console.log('错误信息：', err);
								});
						} else {
							uni.showToast({
								title: res2.msg,
								icon: 'none'
							});
						}
					})
					.catch((err2) => {
						console.log('表单错误信息：', err2);
					});
			}
		});
	},
	methods: {
		goclass1(type) {
			uni.switchTab({
				url: `/pages/index/classification`
			});
			uni.setStorageSync('type', type);
		},
		goclass(type, item, index) {
			uni.switchTab({
				url: `/pages/index/classification`
			});
			uni.setStorageSync('indexdata', { type_id: type, nid: item.id, navIndex: index });
		}
	}
};
</script>

<style lang="less" scoped>
.search {
	width: 710rpx;
	margin: 0 auto;
	position: relative;
	.asd{
		width: 710rpx;
		position: absolute;
		height: 80rpx;
		top: 0%;
	}
}
.swiper {
	width: 100%;
	width: 710rpx;
	height: 320rpx;
	margin: 0rpx auto;
	image {
		width: 710rpx;
		height: 320rpx;
		border-radius: 20rpx;
	}
}
.content {
	width: 710rpx;
	margin: 20rpx auto;
	.items {
		width: 710rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.it_flex {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.it {
			width: 300rpx;
			height: 160rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			color: #fff;
			position: relative;
			.it_left {
				width: 300rpx;
				height: 160rpx;
				position: absolute;
				top: 0%;
				z-index: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 30rpx;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				.name {
				}
			}
			image {
				width: 300rpx;
				height: 160rpx;
				position: absolute;
				border-radius: 10rpx;
			}
		}
	}
}
</style>
